<template>
  <div class="app-container">
    <div class="headers">
      <div class="buttons">
        <el-button type="success" icon="Search" @click="handleQuery" plain
          >搜索</el-button
        >
        <el-button icon="Download">导出当前页面筛查统计</el-button>
        <div class="tips">
          <el-alert
            title="仅统计已在本院做过TST检测的学校"
            type="warning"
            :closable="false"
          />
        </div>
      </div>
      <div class="body">
        <el-table
          :data="institutionallist"
          @selection-change="handleSelectionChange"
          border
          :header-cell-style="headerCellStyle"
        >
        <el-table-column type="selection"/>
          <el-table-column label="序号" align="center" prop="id" />
          <el-table-column label="TST机构所在地 " align="center" prop="" />
          <el-table-column label="TST机构名称" align="center" prop="" />
          <el-table-column label="统一社会信用代码" align="center" prop="" />
          <el-table-column label="TST(IGRA)检测" align="center" prop="id">
            <el-table-column label="TST(IGRA)检测人数" align="center" prop="" />
            <el-table-column label="TB-PPD实验" align="center" prop="date">
              <el-table-column label="阴性" align="center" prop="" />
              <el-table-column label="一般阳性" align="center" prop="" />
              <el-table-column label="中度阳性" align="center" prop="" />
              <el-table-column label="强阳性" align="center" prop="" />
            </el-table-column>
            <el-table-column label="EC实验" align="center" prop="date">
              <el-table-column label="阴性" align="center" prop="" />
              <el-table-column label="阳性" align="center" prop="" />
              <el-table-column label="强阳性" align="center" prop="" />
            </el-table-column>
            <el-table-column
              label="TST超时未判定"
              align="center"
              prop="depId"
            />
            <el-table-column label="IGRA检测" align="center" prop="date">
              <el-table-column label="阴性" align="center" prop="" />
              <el-table-column label="阳性" align="center" prop="" />
            </el-table-column>
          </el-table-column>
          <el-table-column label="X线胸片检查" align="center" prop="date">
            <el-table-column label="检查人数" align="center" prop="" />
            <el-table-column label="未见异常" align="center" prop="" />
            <el-table-column label="异常" align="center" prop="" />
          </el-table-column>
          <el-table-column
            label="(疑似)活动性肺结核人数"
            align="center"
            prop=""
          />
          <el-table-column label="应预防性治疗人数" align="center" prop="" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="institutionaltesting">
import { ref } from 'vue'

const institutionallist = ref([])
const headerCellStyle = ({ column }) => {
  if (column.label === 'TST(IGRA)检测') {
    return {
      background: '#e3f2d9!important',
      color: '#929499',
    }
  } else if (column.label === 'X线胸片检查') {
    return {
      background: '#d2f4f2!important',
      color: '#929499',
    }
  } else {
    return {
      background: '#f5f7fa!important',
      color: '#929499',
    }
  }
}
// 搜索方法
const handleQuery = () => {
  console.log('handleQuery')
}

const handleSelectionChange = () => {}
</script>

<style scoped>
.headers {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.buttons {
  display: flex;
  margin-right: 10px;
}

.tips {
  margin-left: 735px;
}
.body {
  margin-top: 10px;
}
</style>
